Google Charts এর Pie Chart এবং Donut Chart হল দুটি জনপ্রিয় ডেটা ভিজ্যুয়ালাইজেশন টুল যা ডেটাকে সেগমেন্টে বিভক্ত করে প্রদর্শন করে। এই চার্টগুলো সাধারণত সেগমেন্টের অংশের অনুপাত দেখাতে ব্যবহৃত হয়, যেমন মার্কেট শেয়ার, বাজেট ভাগ, এবং অন্যান্য তুলনামূলক ডেটা। এই টিউটোরিয়ালে আমরা দেখব কিভাবে Pie এবং Donut Charts এর জন্য Advanced Customization করা যায়।
Pie Chart এবং Donut Chart এর মধ্যে পার্থক্য
- Pie Chart: একটি সাধারণ গোলাকার চার্ট যা ডেটাকে সেগমেন্টে বিভক্ত করে। এটি পুরোপুরি বৃত্তাকার থাকে।
- Donut Chart: Pie Chart এর মতো, তবে এর মধ্যে একটি খালি অংশ থাকে, যা একটি বৃত্তাকার খাঁজ তৈরি করে।
১. Pie Chart এর Advanced Customization
এখানে একটি Pie Chart তৈরি করা হয়েছে, যা বিভিন্ন কাস্টমাইজেশন এবং স্টাইলিং এর মাধ্যমে দেখানো হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Pie Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expense Distribution',
titleTextStyle: {
color: 'darkblue', // শিরোনামের রং
fontSize: 20, // ফন্ট সাইজ
bold: true // বোল্ড স্টাইল
},
slices: {
0: {offset: 0.1, color: '#FF5733'}, // Food সেগমেন্টের জন্য কাস্টমাইজেশন
1: {offset: 0.1, color: '#33FF57'}, // Rent সেগমেন্টের জন্য কাস্টমাইজেশন
2: {offset: 0.1, color: '#3357FF'}, // Utilities সেগমেন্টের জন্য কাস্টমাইজেশন
},
pieSliceText: 'percentage', // স্লাইসের ভিতরের টেক্সট কিভাবে দেখানো হবে (percentage, value)
pieSliceTextStyle: {
color: 'white', // স্লাইস টেক্সটের রং
fontSize: 14 // স্লাইস টেক্সটের ফন্ট সাইজ
},
legend: {
position: 'labeled', // লেজেন্ডের অবস্থান
alignment: 'center', // লেজেন্ডের কেন্দ্রস্থল
textStyle: {
color: 'green', // লেজেন্ডের টেক্সট রং
fontSize: 16 // লেজেন্ডের ফন্ট সাইজ
}
}
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Pie Chart Example</h2>
<div id="pie_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কাস্টমাইজেশন বিস্তারিত
- শিরোনাম কাস্টমাইজেশন:
titleTextStyleএর মাধ্যমে শিরোনামের রং, সাইজ এবং স্টাইল পরিবর্তন করা হয়েছে। - স্লাইসের কাস্টমাইজেশন:
slicesঅপশনের মাধ্যমে প্রতিটি সেগমেন্টের রং এবং অবস্থান কাস্টমাইজ করা হয়েছে। - পাই স্লাইস টেক্সট:
pieSliceTextএবংpieSliceTextStyleএর মাধ্যমে স্লাইসের ভিতরের টেক্সটের ফরম্যাট কাস্টমাইজ করা হয়েছে। - লেজেন্ড কাস্টমাইজেশন:
legendএর মাধ্যমে লেজেন্ডের অবস্থান, সাইজ এবং রং পরিবর্তন করা হয়েছে।
২. Donut Chart এর Advanced Customization
Donut Chart মূলত Pie Chart এর মতো কাজ করে, তবে এর মধ্যে একটি খালি অংশ থাকে, যা চার্টের মধ্যবর্তী অংশে একটি বৃত্ত তৈরি করে। নিচে একটি Donut Chart তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Donut Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawDonutChart);
function drawDonutChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 50],
['Rent', 20],
['Utilities', 10],
['Entertainment', 15],
['Others', 5]
]);
var options = {
title: 'Monthly Expense Distribution',
titleTextStyle: {
color: 'purple', // শিরোনামের রং
fontSize: 20, // ফন্ট সাইজ
bold: true // বোল্ড স্টাইল
},
pieSliceText: 'percentage', // স্লাইসের ভিতরে টেক্সট (percentage, value)
pieSliceTextStyle: {
color: 'white', // স্লাইস টেক্সটের রং
fontSize: 14 // স্লাইস টেক্সটের ফন্ট সাইজ
},
slices: {
0: {offset: 0.1, color: '#FF5733'}, // Food সেগমেন্টের রং
1: {offset: 0.1, color: '#33FF57'}, // Rent সেগমেন্টের রং
2: {offset: 0.1, color: '#3357FF'}, // Utilities সেগমেন্টের রং
},
pieStartAngle: 270, // Donut Chart এর শুরুর কোণ
pieSliceTextStyle: { // স্লাইসের টেক্সট স্টাইল
color: 'black',
fontSize: 16
},
is3D: true, // 3D ভিউ অন করা
pieSliceBorderColor: 'black', // স্লাইসের সীমানার রং
slices: {
0: {offset: 0.1, color: '#FF5733'}, // Food সেগমেন্টের জন্য
1: {offset: 0.1, color: '#33FF57'}, // Rent সেগমেন্টের জন্য
2: {offset: 0.1, color: '#3357FF'}, // Utilities সেগমেন্টের জন্য
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Advanced Donut Chart Example</h2>
<div id="donut_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Donut Chart কাস্টমাইজেশন বিস্তারিত:
- প্রধান রং ও শিরোনাম কাস্টমাইজেশন:
titleTextStyleদিয়ে শিরোনাম এবং অন্যান্য কাস্টমাইজেশন করা হয়েছে। - 3D ভিউ:
is3Dঅপশন ব্যবহার করে চার্টটিকে 3D ভিউতে রেন্ডার করা হয়েছে। - স্লাইসের কাস্টমাইজেশন:
slicesএবংpieSliceBorderColorব্যবহার করে স্লাইসের রং এবং সীমানা কাস্টমাইজ করা হয়েছে। - শুরু কোণ:
pieStartAngleএর মাধ্যমে ডোনাট চার্টের শুরু কোণ পরিবর্তন করা হয়েছে, যাতে এটি একটি সম্পূর্ণ গোলাকার বৃত্তের মতো প্রদর্শিত না হয়।
উপসংহার
Google Charts এর Pie Chart এবং Donut Chart এ বিভিন্ন ধরনের Advanced Customization এর মাধ্যমে আপনি নিজের চার্টকে সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন। শিরোনাম, স্লাইসের রং, টুলটিপ, স্লাইসের টেক্সট, লেজেন্ড, 3D ভিউ ইত্যাদির কাস্টমাইজেশন এর মাধ্যমে আপনার চার্টকে আরও তথ্যপূর্ণ এবং আকর্ষণীয় করে তোলা যায়।
Content added By
Read more
